import Taro, {Component} from '@tarojs/taro'
import {connect} from '@tarojs/redux'
import {View, ScrollView, Picker, Button} from '@tarojs/components'
import './index.less'
import {AtIcon, AtButton} from 'taro-ui'

@connect(({businessDetail, informDetail, loading}) => ({
  businessDetail,
  informDetail,
  loading
}))

export default class SupplyDetail extends Component {

  config = {
    navigationBarTitleText: ''
  }

  constructor(props) {
    super(props)
    this.state = {
      current: 0
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
    const {dispatch} = this.props;
    // 获取列表数据
    dispatch({type: 'businessDetail/loadData'})
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  // 分享小程序
  onShareAppMessage(options) {
    const {businessDetail,dispatch} = this.props;
    const {listData} = businessDetail;
    // 设置菜单中的转发按钮触发转发事件时的转发内容
    var shareObj = {
      title: "江苏厂管家",        // 默认是小程序的名称(可以写slogan等)
      path: `pages/businessDetail/index?id=${listData.id}`,        // 默认是当前页面，必须是以‘/’开头的完整路径
    };
    dispatch({ type: 'businessDetail/sharePage' })
    return shareObj;
  }

  //打电话
  phoneCall(phoneNumber, e) {
    if(phoneNumber){
      Taro.makePhoneCall({ phoneNumber: num })
      //阻止事件向上级冒泡
      e.stopPropagation();
    }else{
      Taro.showToast({
        title: '暂无电话可拨打',
        icon: 'none'
      })
    }
  }

  render() {
    const {
      businessDetail, dispatch
    } = this.props;
    const {
      tableAry, listData
    } = businessDetail;
    const updateState = (obj) => {
      dispatch({
        type: 'businessDetail/updateState',
        payload: {
          ...obj
        }
      })
    }
    const bannerList = listData.topImage ? [listData.topImage] : [];
    return (

      <View className='supplyDetail'>
        <View className='detailBox'>
          <View className='topBox'>
            {
              bannerList && bannerList[0] ?
                <Swiper
                  interval={10000}
                  className="swiper-container"
                  circular
                  indicatorDots
                  autoplay
                  indicatorColor='#FAFAFA'
                  indicatorActiveColor='#026179'
                >
                  {
                    bannerList.map((item, index) => (
                      <SwiperItem key={index}>
                        {/* <image src={`${DOWNLOAD + item}`}  className="swiper-img" /> */}
                        <image src={item} className="swiper-img"/>
                      </SwiperItem>
                    ))
                  }
                </Swiper>
                :
                <Image className="swiper-img bannerDef" mode="widthFix" src="../../images/banner.png"></Image>
            }
            </View>
            <View className='tableBox'>
            <View className='title'>{listData.title||''}</View>
              {/* <View className='numText'>最低采购0</View> */}
              {tableAry.map(item => <View key={item.name} className='tableList'>
                <View className='tableName'>{item.name}</View>
                <View className='tableValue'>{item.value === 'cellphone'?(listData.showCellphone?(listData.cellphone||'暂无联系方式'):'分享解锁后显示电话'):(listData[item.value]||'')}</View>
              </View>)}
            </View>
          </View>
          {!(listData.showCellphone)&&<View className='shareBtn'>
            <AtButton openType='share' size='small' type="primary">
                {/* <AtIcon value='external-link' color='#ff505f' size='18'></AtIcon> */}
                分享至朋友圈，查看电话
            </AtButton>
          </View>}
          {(listData.showCellphone)&&<View className='shareBtn'>
            <AtButton size='small' type="primary"
              onClick={this.phoneCall.bind(this, listData.cellphone)}
            >
                拨打电话
            </AtButton>
          </View>}
      </View>
    )
  }
}
